<html>
    <head>

    </head>
    <body onload="creat()">
        <div id = "one" style="position: absolute;width: 30px; left:0px;top:0px; height: 30px;background: red;"></div>
        <script>
			var one = document.getElementById("one");
			var gox = 0;
			var goy = 0;
			var x = 0;
			var y = 0;
			var leftx = 0;
			var lefty = 0;
			//var ev = event;
			var run = 0;
			function creat() {
				one.style.left = Math.floor(Math.random() * 1350);
				one.style.top = Math.floor(Math.random() * 650);
				//setInterval(one.style.left = x + 20,50);
			}


			document.onmousedown = function(e) {
				clearInterval(run);
				var ev = e || window.event;
				gox = ev.clientX;
				goy = ev.clientY;
				x = parseInt(one.style.left) + 15;
				y = parseInt(one.style.top) + 15;
				leftx = gox - x;
				lefty = goy - y;
				run = setInterval(function() {
					if (leftx > 0) {
						if (x < gox - 15) {
							one.style.left = x + 10;
							x = x + 10;
							//   var str = one.style.left;
							// one.innerHTML = str;
						} else {
							if (lefty > 0) {
								if (y < goy - 15) {
									one.style.top = y + 10;
									y = y + 10;
									//var str = one.style.top;
									//one.innerHTML = str;
								}
							}
							//if(lefty < 0)
							else {
								if (y > goy - 15) {
									one.style.top = y - 10;
									y = y - 10;
								}
							}
						}
					}
					//if(leftx < 0)
					else {
						if (x > gox - 15) {
							one.style.left = x - 10;
							x = x - 10;
						} else {
							if (lefty > 0) {
								if (y < goy - 15) {
									one.style.top = y + 10;
									y = y + 10;
								}
							}
							//if(lefty < 0)
							else {
								if (y > goy - 15) {
									one.style.top = y - 10;
									y = y - 10;
								}
							}
						}
					}

				}, 50);
			}
			document.onmouseup = function(e) {
				clearInterval(run);
				run = setInterval(function() {
					/* if(leftx > 0 && lefty > 0)
					 {
					 if(x < gox-15)
					 {
					 one.style.left = x + 10;
					 x = x + 10;
					 var str = one.style.left;
					 one.innerHTML = str;
					 }
					 else{
					 if(y < goy-15)
					 {
					 one.style.top = y + 10;
					 y = y + 10;
					 }
					 }
					 }
					 else if(leftx > 0 && lefty < 0)
					 {
					 if(x < gox-15)
					 {
					 one.style.left = x + 10;
					 x = x + 10;
					 }
					 else{

					 if(y > goy-15)
					 {
					 one.style.top = y - 10;
					 y = y - 10;
					 }
					 }
					 }
					 else if(leftx < 0 && lefty > 0)
					 {
					 if(x > gox-15)
					 {
					 one.style.left = x - 10;
					 x = x - 10;
					 }
					 else{

					 if(y < goy-15)
					 {
					 one.style.top = y + 10;
					 y = y + 10;
					 }
					 }
					 }
					 else if(leftx < 0 && lefty < 0)
					 {
					 if(x > gox-15)
					 {
					 one.style.left = x - 10;
					 x = x - 10;
					 }
					 else{

					 if(y > goy-15)
					 {
					 one.style.top = y - 10;
					 y = y - 10;
					 }
					 }
					 }*/
					if (leftx > 0) {
						if (x < gox - 15) {
							one.style.left = x + 10;
							x = x + 10;
							// var str = one.style.left;
							//one.innerHTML = str;
						} else {
							if (lefty > 0) {
								if (y < goy - 15) {
									one.style.top = y + 10;
									y = y + 10;
									//var str = one.style.top;
									//one.innerHTML = str;
								}
							}
							//if(lefty < 0)
							else {
								if (y > goy - 15) {
									one.style.top = y - 10;
									y = y - 10;
								}
							}
						}
					}
					//if(leftx < 0)
					else {
						if (x > gox - 15) {
							one.style.left = x - 10;
							x = x - 10;
						} else {
							if (lefty > 0) {
								if (y < goy - 15) {
									one.style.top = y + 10;
									y = y + 10;
								}
							}
							//if(lefty < 0)
							else {
								if (y > goy - 15) {
									one.style.top = y - 10;
									y = y - 10;
								}
							}
						}
					}
					/* if(x < gox-15)
					 {
					 one.style.left = x + 10;
					 x = x + 10;
					 }

					 else if(y < goy-15)
					 {
					 one.style.top = y + 10;
					 y = y + 10;
					 }*/

				}, 100);
			}
        </script>

    </body>
</html>